<template>
  <div class="enterprise">
    <Mapview ref="baseMap" @mapLoad="mapLoad"></Mapview>
    <div class="bg">
      <HeadBox title="企业服务"></HeadBox>
      <div class="main">
        <el-col :span="6">
          <div class="contetn-left">
            <ItemWrap style="height: 35vh" title="单位基本信息">
              <div style="display: flex; width: 100%">
                <infoPie
                  v-if="isShowInfo"
                  v-for="(item, index) in liquidList"
                  :key="index"
                  :domId="'echarts' + index"
                  :colorStops="item.colorStops"
                  :liquidColor="item.liquidColor"
                  :companyData="item.companyData"
                />
              </div>
              <div class="tips">
                <p>
                  <span class="circle" style="background: #00ffff"></span>
                  <span class="tit">个体</span>
                  <span class="num" style="color: #00ffff">{{ infoObj.qy }}</span>
                </p>
                <p>
                  <span class="circle" style="background: #008aff"></span>
                  <span class="tit">个体户</span>
                  <span class="num" style="color: #008aff">{{ infoObj.gt }}</span>
                </p>
                <p>
                  <span class="circle" style="background: #6200d0"></span>
                  <span class="tit">社会组织</span>
                  <span class="num" style="color: #6200d0">{{ infoObj.zz }}</span>
                </p>
              </div>
            </ItemWrap>
            <ItemWrap style="height: 47vh; margin-top: 20px" title="单位登记情况">
              <regLine v-if="regList.length > 0" :regList="regList"></regLine>
            </ItemWrap>
          </div>
        </el-col>
        <el-col :span="7" :offset="11">
          <div class="contetn-right">
            <ItemWrap style="height: 40vh" title="企业类型分布">
              <typeLine v-if="typeList.length > 0" :typeList="typeList"></typeLine>
            </ItemWrap>
            <ItemWrap style="height: 42vh; margin-top: 20px" title="年度注册资本较高的企业">
              <dv-scroll-board :config="config" ref="table1" style="height: calc(100% - 20px)" />
            </ItemWrap>
          </div>
        </el-col>
      </div>
    </div>
    <div id="maptools">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox v-model="item.isCheck" @change="changeCheckBox()" /><span>{{ item.name }} {{ item.nums }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>
    <info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
      <info-window-item label="地址：" :value="detail.address"></info-window-item>
      <info-window-item label="类型：" :value="detail.type"></info-window-item>
      <info-window-item label="注册资本：" :value="detail.money"></info-window-item>
    </info-window>
  </div>
</template>
<script>
import infoPie from './echarts/infoPie.vue'
import regLine from './echarts/regLine.vue'
import typeLine from './echarts/typeLine.vue'
import InfoWindow from '@/components/info-window/index.vue'
import InfoWindowItem from '@/components/info-window/item.vue'
import Mapview from '@/components/map-container/index.vue'

export default {
  components: {
    Mapview,
    infoPie,
    regLine,
    typeLine,
    InfoWindow,
    InfoWindowItem,
  },
  data() {
    return {
      detail: {},
      showDetail: false,
      map: null,
      resAmap: null,
      infoWindow: null,
      mapDropdownList: [
        {
          isCheck: true,
          typeId: "'C'",
          name: '建筑',
          nums: 0,
          data: [],
        },
        {
          isCheck: true,
          typeId: "'D'",
          name: '互联网',
          nums: 0,
          data: [],
        },
        {
          isCheck: true,
          typeId: "'E'",
          name: '纺织',
          nums: 0,
          data: [],
        },
        {
          isCheck: true,
          typeId: "'F'",
          name: '汽车',
          nums: 0,
          data: [],
        },
        {
          isCheck: true,
          typeId: "'G'",
          name: '医疗',
          nums: 0,
          data: [],
        },
        {
          isCheck: true,
          typeId: "'H'",
          name: '仓储',
          nums: 0,
          data: [],
        },
      ],
      liquidList: [
        {
          liquidColor: '#6200D0',
          companyData: '0.00',
          colorStops: [
            {
              offset: 1,
              color: 'rgba(209, 45, 156, 0.8)',
            },
            {
              offset: 0,
              color: 'rgba(94, 162, 239, 0.8)',
            },
          ],
        },
        {
          liquidColor: '#008AFF',
          companyData: '0.00',
          colorStops: [
            {
              offset: 1,
              color: 'rgba(13, 204, 255, 0.8)',
            },
            {
              offset: 0,
              color: 'rgba(71, 96, 255, 0.8)',
            },
          ],
        },
        {
          liquidColor: '#00FFFF',
          companyData: '0.00',
          colorStops: [
            {
              offset: 1,
              color: 'rgba(143, 252, 160, 0.8)',
            },
            {
              offset: 0,
              color: 'rgba(11, 203, 251, 0.8)',
            },
          ],
        },
      ],
      infoObj: {
        qy: 0,
        gt: 0,
        zz: 0,
      },
      isShowInfo: false,
      // isShowReg: false,
      // isShowType: false,
      regList: [], //登记情况
      typeList: [], //类型分布
      config: {
        header: ['企业名称', '成立日期', '注册资本'],
        data: [
          ['<span style="color:#9fe6b8;">海淀区政府</span>', '23', '23'],
          ['<span style="color:#9fe6b8;">市发展改革委</span>', '26', '23'],
          ['<span style="color:#9fe6b8;">市民政局</span>', '35', '23'],
          ['<span style="color:#9fe6b8;">市城市管理委</span>', '39', '23'],
          ['<span style="color:#9fe6b8;">市规划自然资源委</span>', '39', '23'],
        ],
        headerHeight: 40,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [45],
        align: ['center'],
      },
      dataList: [],
    }
  },
  created() {
    this.getEssentialInfo()
    this.getRegistration()
    this.getEnterpriseType()
    this.getHighRegisteredCapital()
  },
  mounted() {
    // this.getQueryPoint('')
  },
  methods: {
    mapLoad(amap) {
      this.map = amap
      let array1 = [],
        array2 = ''
      array1 = this.mapDropdownList.map((v) => {
        return v.typeId
      })
      array2 = array1.join(',')
      this.getQueryPoint(array2)
    },
    /*
     *  C:建筑、D:互联网、E:纺织、F:汽车、G:医疗、H:仓储
     * 获取所有点位
     */
    getQueryPoint(typeId) {
      this.$get('/enterpriseservice/queryPoint', { trade: typeId }).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.mapDropdownList[0].nums = res.data.jz
        this.mapDropdownList[1].nums = res.data.hlw
        this.mapDropdownList[2].nums = res.data.fz
        this.mapDropdownList[3].nums = res.data.qc
        this.mapDropdownList[4].nums = res.data.yl
        this.mapDropdownList[5].nums = res.data.cs
        let data = res.data.data
        let mapMarkerList = []
        // if (!this.map) {
        //   return
        // }
        this.map.clearMap()
        // 借助require函数提前加载到图片
        mapMarkerList = data.map((item) => {
          let strimg = require(`@/assets/image/icon/${item.trade}.png`)
          let markerContent = ' <img style="width: 24px;" src="' + strimg + '" alt="" />'
          let marker = new AMap.Marker({
            position: [item.lng, item.lat],
            content: markerContent,
            extData: item,
          })
          marker.on('click', this.markerClick)
          return marker
          // 将创建的点标记添加到已有的地图实例：
        })
        this.map.add(mapMarkerList) //调用map的add方法点位列表渲染到地图中
      })
    },
    //点位点击事件，展示信息窗体
    markerClick(e) {
      // var e = event || window.event;
      var left = e.pixel.x
      var top = e.pixel.y
      console.log(left, top)
      this.detail = e.target._opts.extData
      this.showDetail = true
    },
    // 监听复选框
    changeCheckBox() {
      let array1 = [],
        array2 = [],
        array3 = ''
      array1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      array2 = array1.map((item) => {
        return item.typeId
      })
      array3 = array2.join(',')
      this.getQueryPoint(array3)
    },
    // 基本信息
    getEssentialInfo() {
      this.$get('/enterpriseservice/getEssentialInfo').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        this.isShowInfo = true
        this.infoObj.qy = data.qy
        this.infoObj.gt = data.gt
        this.infoObj.zz = data.zz
        this.liquidList[0].companyData = data.qyl
        this.liquidList[1].companyData = data.gtl
        this.liquidList[2].companyData = data.zzl
      })
    },
    // 登记情况
    getRegistration() {
      this.$get('/enterpriseservice/getRegistration').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.regList = res.data
        // this.isShowReg = true
      })
    },
    // 类型分布
    getEnterpriseType() {
      this.$get('/enterpriseservice/getEnterpriseType').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.typeList = res.data
        // this.isShowType = true
      })
    },
    // 注册资本很高的企业
    getHighRegisteredCapital() {
      this.$get('/enterpriseservice/getHighRegisteredCapital').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let dataList = res.data
        let resultList = []
        dataList.map((v, i) => {
          var item = ['', '', '']
          let colorCode = ''
          if (i % 2 == 0) {
            colorCode = '<span style="color:#9fe6b8;">'
          } else {
            colorCode = '<span style="color:#67e0e3;">'
          }
          item[0] = `${colorCode}${v.name}</span>`
          item[1] = `${colorCode}${v.foundDate}</span>`
          item[2] = `${colorCode}${v.money}</span>`
          resultList.push(item)
        })
        this.config.data = resultList
        this.$refs['table1'].updateRows(resultList)
      })
    },

    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn()
      } else {
        this.map.zoomOut()
      }
    },
  },
}
</script>
<style lang="less" scoped>
#maptools {
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
  background: url('../../assets/image/bg.png') top no-repeat;
  background-size: 100% 100%;
}
.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
.tips {
  width: 100%;
  padding-top: 20px;
  p {
    justify-content: space-between;
    width: 100%;
    align-items: center;
    display: flex;
    padding: 3px 0;
    width: 100%;
  }
  .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 6px;
    display: inline-block;
  }
  .tit {
    font-size: 14px;
    padding-left: 15px;
    color: #fff;
  }
  .num {
    font-size: 14px;
    color: #fff;
  }
}
</style>
